import React, { useMemo } from 'react';
import classNames from 'classnames';
import { svgAttr } from './config';
import { Props } from './icon';

// 加载中
function Loading(props: Props): JSX.Element {
  const {
    fontSize = 30,
    color = '#999999',
    animation = false
  } = props;

  const allowAnimation = useMemo(() => animation, [animation]);
  const p = useMemo(() => 2 * Math.PI * 150 * 0.8, []); // 周长

  return (
    <svg
      {...svgAttr}
      fontSize={fontSize}
      color={color}
      className={classNames(
        svgAttr.className,
        { 'easy-icon-loading': allowAnimation }
      )}
    >
      <circle
        cx="200"
        cy="200"
        r="150"
        stroke="currentColor"
        fill="transparent"
        strokeWidth="20"
        strokeDasharray={p}
      />
    </svg>
  )
}

export default Loading
